var ApprovalProcessSetting = function () {
  var template = /* html */ `
    <div class="approval-process-setting">
      <div class="approval-setting-path clearfix">
        <div class="approval-setting-path-title">审核流程</div>
        <div class="approval-setting-path-content">
          <template v-for="(user,index) in users">
            <div :key="'user_'+user.id" class="text">
              <span>{{user.name}}</span>
              <div class="delete" @click="deleteUser(user)"><i class="el-icon-circle-close"></i></div>
            </div>
            <div :key="'arrow_'+user.id" v-if="index!==users.length-1">
              <i class="el-icon-right"></i>
            </div>
          </template>
        </div>
      </div>
      <div style="margin-bottom:10px;">
        <el-checkbox-group v-model="userIds" size="small">
          <el-checkbox v-for="user in userList" :key="user.id" :label="user.id">{{user.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="text-align:center">
        <el-button size="small" type="primary" @click="ensure">确定</el-button>
      </div>
    </div>
  `;

  return {
    props: {
      approval: {
        type: Object,
        required: true
      },

      userList: {
        type: Array,
        required: true
      }
    },

    watch: {
      userIds: function () {
        this.resetUsers();
      }
    },

    data: function () {
      return {
        userObj: this.getUserObj(),
        userIds: this.getUserIds(),
        users: _.cloneDeep(this.approval.users)
      };
    },

    methods: {
      getUserObj: function () {
        var userList = this.userList;
        var userObj = {};
        for (var i = 0; i < userList.length; i++) {
          var user = userList[i];
          userObj[user.id] = user;
        }
        return userObj;
      },

      getUserIds: function () {
        var users = this.approval.users;
        var userIds = _.map(users, 'id');
        return userIds;
      },

      resetUsers: function () {
        var userIds = this.userIds;
        var userObj = this.userObj;
        var users = _.map(userIds, function (id) {
          return userObj[id];
        });
        this.users = users;
      },

      deleteUser: function (user) {
        var userIds = this.userIds;
        var index = userIds.indexOf(user.id);
        if (index !== -1) {
          userIds.splice(index, 1);
        }
      },

      ensure:function(){
        var users = this.users;
        if (users.length === 0) {
          this.$alert('请勾选设置审核流程','信息');
          return;
        }

        this.approval.users = users;
        this.$emit('setting-success');
      }
    },

    template: template
  };
}();
